<template>
	<view class="page" id="addbank_page">
		<status-bar title='添加银行卡'></status-bar>
		<view class="form2_list">
			<view class="form2_item flex-box">
				<view class="form2_t">持卡人姓名</view>
				<input type="text" v-model="cardMsg.userName" placeholder="请输入持卡人姓名" class="form2_input flex" placeholder-class="pla"/>
			</view>
		</view>	
		<view class="form2_list">
			<view class="form2_item flex-box">
				<view class="form2_t">选择银行</view>
				<picker class="flex" mode="selector" :range="bank" @change="change">
					<view class="uni-list-cell-db flex-box align-center">
						<view class="selectBank flex" :class="{pla: !cardMsg.bankName}">{{cardMsg.bankName?cardMsg.bankName:'请选择开户行'}}</view>
						<text class="iconfont icon-xiangyouxiayiye"></text>
					</view>
				</picker>
			</view>
			<view class="form2_item flex-box">
				<view class="form2_t">开户支行</view>
				<input type="text" v-model="cardMsg.branchBank" placeholder="请输入开户支行" class="form2_input flex" placeholder-class="pla"/>
			</view>
			<view class="form2_item flex-box">
				<view class="form2_t">银行卡号</view>
				<input type="number" maxlength="20" v-model="cardMsg.bankCard" placeholder="请输入银行卡号" class="form2_input flex" placeholder-class="pla"/>
			</view>
			<template v-if='cardMsg && cardMsg.direct_income == 1'>
				<view class="form2_item flex-box">
					<view class="form2_t">身份证号</view>
					<input type="text" maxlength="20" v-model="cardMsg.idNo" placeholder="请输入身份证号" class="form2_input flex" placeholder-class="pla"/>
				</view>
				<view class="form2_item flex-box uploads">
					<view class="form2_t">身份证正面</view>
					<view class="flex">
						<view class="up-box flex-box align-center flex-center" @click="selectImage(0)">
							<image v-if='tempFilePaths[0]' :src="tempFilePaths[0]" class="img"></image>
							<image v-else :src="staticUrl+'/images/plus_ico.png'" class="icon-upload"></image>
						</view>
					</view>
				</view>
				<view class="form2_item flex-box uploads">
					<view class="form2_t">身份证反面</view>
					<view class="flex">
						<view class="up-box flex-box align-center flex-center" @click="selectImage(1)">
							<image v-if='tempFilePaths[1]' :src="tempFilePaths[1]" class="img"></image>
							<image v-else :src="staticUrl+'/images/plus_ico.png'" class="icon-upload"></image>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view v-if="cardMsg">
			<view class="fail_reason" v-if='cardMsg.contract_state == 0 && cardMsg.fail_reason'>{{ cardMsg.fail_reason }} ! 请重新上传</view>
			<view v-if='cardMsg.contract_state == 2' class="btn3" style="background-color: #F4C575;">审核中···</view>
			<view v-else class="btn3 thmeBg" @click="addBankCard" :style="{'--color': color}">确定</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				staticUrl: this.staticUrl,
				
				vid: uni.getStorageSync('vid'),
				color: getApp().globalData.color,
				
				
				minute:'中国工商银行',
				
				bank:[
					'中国工商银行','中国建设银行','中国银行','交通银行','中国农业银行','招商银行',
					'邮政储蓄银行','光大银行','民生银行','平安银行','浦发银行','中信银行','兴业银行',
					'华夏银行','广发银行','重庆银行','重庆农村商业银行','北京银行','徽商银行'
					,'天津银行','深圳农村商业银行','上海银行','汉口银行','南京银行','宁波银行'
					,'龙江银行','北京农商银行','江苏银行','广州银行','浙商银行','杭州银行','上海农商银行'
					,'渤海银行','广州农村商业银行','青岛银行','成都银行','哈尔滨银行','吉林银行','大连银行'
					,'齐鲁银行','东莞银行','长沙银行','河北银行','东莞农村商业银行','郑州银行','包商银行'
				],
				
				
				front_photo: '', //身份证正面图片url
				back_photo: '', //身份证反面图片url
				tempFilePaths: ['',''],
				cardMsg: ''
			}
		},
		onShow(){
			// #ifdef MP			
			uni.hideShareMenu();			
			// #endif
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onLoad() {
			that = this
			that.initialize();
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		methods:{
			change(e){
				that.cardMsg.bankName = that.bank[e.detail.value]
			},
			selectImage(index){//选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'],
					success: (res) => {
						if(res.tempFilePaths){
							that.tempFilePaths[index] = res.tempFilePaths[0]
						}
						that.tempFilePaths = [].concat(that.tempFilePaths)
					}
				})
			},
			initialize: function() {
				that.$http.post({
					url: '/singleSaleApi/findBankCard',
					data: {
						v_id: uni.getStorageSync('vid'),
						bid: uni.getStorageSync('bid'),
					}
				}).then(res => {
					if (res.errcode == 100 && res.data) {
						var data = res.data;
						that.cardMsg = res.data
						if(data.front_photo){
							that.tempFilePaths[0] =  that.imgUrl + data.front_photo
							that.front_photo = data.front_photo
						}
						if(data.back_photo){
							that.tempFilePaths[1] =  that.imgUrl + data.back_photo
							that.back_photo = data.back_photo
						}	
						if(data.userName || data.bankName || data.bankCard){
							uni.setNavigationBarTitle({
								title: '修改银行卡'
							})
						} else{
							uni.setNavigationBarTitle({
								title: '添加银行卡'
							})
						}
					}
				})
			},
			async addBankCard(){
				if(!that.cardMsg.userName){
					uni.showToast({title: '请输入持卡人姓名',icon:'none'})
					return
				}
				if(!that.cardMsg.bankName){
					uni.showToast({title: '请选择银行',icon:'none'})
					return
				}
				if(!that.cardMsg.branchBank){
					uni.showToast({title: '请输入开户支行',icon:'none'})
					return
				}
				if(!that.cardMsg.bankCard){
					uni.showToast({title: '请输入银行卡号',icon:'none'})
					return
				}
				
				if(that.cardMsg.direct_income == 1){
					if (!that.cardMsg.idNo) {
						uni.showToast({icon: 'none',title: '请输入身份证号码'})
						return
					}
					if (!that.$reg.idCard.test(that.cardMsg.idNo)) {
						uni.showToast({icon: 'none',title: '身份证格式错误'})
						return
					}
					if (!that.tempFilePaths[0]) {
						uni.showToast({icon: 'none',title: '请上传清晰的身份证正面照！'})
						return
					}
					if (!that.tempFilePaths[1]) {
						uni.showToast({icon: 'none',title: '请上传清晰的身份证反面照！'})
						return
					}
					uni.showLoading({
						title:'提交中'
					})
					if(that.tempFilePaths[0] && that.tempFilePaths[0].indexOf('blob:') > -1){
						await that.$common.uploadFile('/zzjApp/uploade?bid='+uni.getStorageSync('bid'),that.tempFilePaths[0],1).then(res2=>{
							var data = res2;
							if(typeof res2 == 'string'){data = JSON.parse(data)}
							if(data.errcode == 100){
								var imgItem = data.url;
								imgItem = imgItem.substring(22,imgItem.length);
								that.front_photo = imgItem
							}else{
								uni.showToast({
									icon: 'none',
									title: data.msg+'!',
									duration: 2000
								})
							}
						})
					}
					if(that.tempFilePaths[1] && that.tempFilePaths[1].indexOf('blob:') > -1){
						await that.$common.uploadFile('/zzjApp/uploade?bid='+uni.getStorageSync('bid'),that.tempFilePaths[1],1).then(res2=>{
							var data = res2;
							if(typeof res2 == 'string'){data = JSON.parse(data)}
							if(data.errcode == 100){
								var imgItem = data.url;
								imgItem = imgItem.substring(22,imgItem.length);
								that.back_photo = imgItem
							}else{
								uni.showToast({
									icon: 'none',
									title: data.msg+'!',
									duration: 2000
								})
							}
						})
					}
				}
				
				that.$http.post({
					url: '/singleSaleApi/addBankcard',
					data: {
						v_id: uni.getStorageSync('vid'),
						userName: that.cardMsg.userName,
						bankName: that.cardMsg.bankName,
						bankCard: that.cardMsg.bankCard,
						branchBank: that.cardMsg.branchBank,
						idNo: that.cardMsg.idNo, //身份证号
						front_photo: that.front_photo, // 身份证正面图片url
						back_photo: that.back_photo, // 身份证反面图片url
					}
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg,
						duration: 1500
					})
					uni.hideLoading()
					if(res.errcode == 100){
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							})
						},1500)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F8F8F8;
		.form2_list{
			margin-bottom: 30upx;
		}
		.pla{
			color: #bdbdbd;
		}
		.fail_reason{
			text-align: center;
			color: red;
			margin-bottom: 30rpx;
		}
	}
	
	.uploads{
		height: 160rpx;
		.up-box{
			background-color: #F5F5F5;
			width: 200rpx;
			height: 130rpx;
			.icon-upload{
				width: 60rpx;
				height: 60rpx;
				opacity: 0.6;
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.form2_item .form2_input,.selectBank{
		font-size: 28upx;
	}
	.form2_item .form2_t{
		color: #666666;
	}
</style>
